<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Analyse statistique - Select period</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="css/site.css"/>
    </h:head>
    <h:body>
        <h:form>
            <div style="padding-top: 100px; text-align:center; font-size: 70px">
                Select period
            </div>
            <table class="period">
                <tr>
                    <td class="bigfont">
                        From
                    </td>
                    <td class="period">
                        <p:selectOneMenu class="selection" id="fromMonth" value="#{pageController.selectedFromMonth}">
                            <f:selectItems value="#{pageController.availableFromMonth}"/>
                        </p:selectOneMenu>
                        /
                        <p:selectOneMenu class="selection" id="fromYear" value="#{pageController.selectedFromYear}">
                            <f:selectItems value="#{pageController.availableFromYear}"/>
                        </p:selectOneMenu>
                    </td>
                </tr>
                <tr>
                    <td class="bigfont">To</td>
                    <td class="period">
                        <p:selectOneMenu class="selection" id="toMonth" value="#{pageController.selectedToMonth}">
                            <f:selectItems value="#{pageController.availableToMonth}"/>
                        </p:selectOneMenu>
                        /
                        <p:selectOneMenu class="selection" id="toYear" value="#{pageController.selectedToYear}">
                            <f:selectItems value="#{pageController.availableToYear}"/>
                        </p:selectOneMenu>
                    </td>
                </tr>  
                <tr>
                    <td colspan="2">
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />                       
                    </td>
                </tr>
            </table>
            <div style="text-align:center; margin-top:100px">                
                <p:commandButton style="width:300px; height:50px" value="Visualize" action="#{pageController.visualize()}"/>                    
            </div>
        </h:form>
    </h:body>
</html>
